<template>
  <div :style="{color,fontSize:'20px'}" id="app" >
    <table class="tb">
    <th>
      欢迎光临可爱又迷人的洋洋小点心铺子
    </th>
    <tr>
     <td> 螺蛳粉10/包---5折折扣</td></tr>
    <tr> <td>请输入想买几包<input type="text" v-model.number="num"></td></tr>
     <tr><td><button @click="totlo">结账</button></td></tr>
     <td>账单:总价 {{this.money}}元，折后价 {{this.youhui}}，省了：{{this.save}}元</td>
     
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return{
          num:'',
          money:'',
          youhui:'',
          save:'',
          color:'green',
     
    }
  },
  methods:{
    totlo(){
      this.money=this.num*10
      this.youhui=this.money*0.5
      this.save=this.money-this.youhui
    }
  }

}
</script>

<style>
#app {
  width: 600px;
  margin: 100px auto;
 
}

.tb {
  border-collapse: collapse;
  width: 100%;
}
.tb th {
  background-color: yellowgreen;
  color: white;
}
.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

</style>